<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/02-reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2976530_owr7i341jws.css">
    <link rel="icon" href="./images/京东-01.png">
    <link rel="stylesheet" href="css/list.css">
    <style>
        .box1 {
            width: 100%;
            height: 50px;
            background-color: #e9ccd3;
            box-sizing: border-box;
            min-width: 1200px;
        }

        .box1 ul {
            width: 1000px;
            height: 50px;
            float: right;

        }

        .box1 ul li {
            float: left;
        }

        .box1 ul li a {
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            width: 200px;
            height: 50px;
        }

        .box1 p {
            float: left;
            font-size: 20px;
            line-height: 50px;
            margin-left: 100px;
            min-width: 100px;
        }

        .box1 ul li a:hover {
            background-color: #b598a1;
        }

        .bann {
            width: 100%;
            height: 120px;
            min-width: 1100px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            background-color: white;
            overflow: hidden;
        }

        .bann .logo {
            width: 100px;
            height: 120px;
            background: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png) no-repeat top center;
            margin-left: 100px;
            cursor: pointer;
            float: left;
        }

        .bann .ipt {
            width: 700px;
            height: 120px;
            margin-left: 100px;
            position: relative;
            float: left;
        }

        .bann .ipp {
            float: left;
        }

        .bann .ipt input {
            width: 400px;
            height: 10px;

            padding: 10px;
            font-size: 20px;
            outline: none;
            border: 2px solid red;
            float: left;
        }

        .bann .ipt span.iconfont {
            position: absolute;
            top: 58px;
            left: 380px;
            font-size: 20px;
            cursor: pointer;
        }

        .bann .ipt .so {
            width: 40px;
            height: 34px;
            background-color: red;
            float: left;
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            line-height: 34px;
            color: white;
            cursor: pointer;
        }

        .bann .bright {
            width: 180px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-top: 50px;
            margin-left: 20px;
            cursor: pointer;
        }

        .bann .bright .iconfont {
            color: red;
            font-size: 20px;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        .bann .bright p {
            font-size: 16px;
            color: red;
            float: left;
            margin-left: 20px;
            margin-top: 4px;
        }

        .bann .bright:hover {
            border-color: red;
        }

        .bann .bbott {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul li {
            float: left;
            font-size: 14px;
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .bann .bbott ul li a {
            color: #ccc;
        }

        .bann .bbott ul li:hover a {
            color: red;
        }

        .bann .maxright {
            width: 200px;
            height: 110px;
            float: right;
            background: url(https://img13.360buyimg.com/da/jfs/t1/197524/35/21950/130567/62451d53E976d9cdc/6794459b3cd6fa84.jpg.webp)no-repeat bottom left;
            background-size: 100% 100%;
            margin-right: 200px;
            margin-top: 6px;
            cursor: pointer;
        }

        .bann .ipt .ipp .ipptop {
            width: 60px;
            height: 30px;
            background-color: red;
            margin-top: 20px;
        }

        .bann .ipt .ipp .ipptop a {
            height: 30px;
            line-height: 30px;
            margin-left: 14px;
            color: white;
            float: left;
        }

        .zss {
            padding: 10px;
            overflow: hidden;
            height: 75px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="./index.html">
            <p>京东</p>
        </a>
        <ul>
            <li><a href="./login.html" class="login">登录</a></li>
            <li><a href="./resgiter.html" class="logup">注册</a></li>
            <li><a href="./mycat.html">我的订单</a></li>
            <li><a href="./list.html">商品列表</a></li>
            <li><a href="./my.html">个人中心</a></li>
        </ul>
    </div>
    <div class="bann">
        <div class="logo">
        </div>
        <div class="ipt">
            <div class="ipp">
                <div class="ipptop">
                    <a>京东</a>
                </div>
                <input type="text">
                <div class="so">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </div>
            <span class="iconfont icon-xiangji"></span>
            <div class="bright">
                <i class="iconfont icon-gouwuche"></i>
                <p>我的购物车</p>
            </div>
            <div class="bbott">
                <ul>
                    <li><a href="">家具家装节</a></li>
                    <li><a href="">大牌空调</a></li>
                    <li><a href="">9.9绿植</a></li>
                    <li><a href="">京东京造</a></li>
                    <li><a href="">维密</a></li>
                    <li><a href="">oppo手机</a></li>
                </ul>
            </div>
        </div>
        <div class="maxright">
            <a href=""></a>
        </div>
    </div>
    <div class="cent">
        <div class="centtop">
            <span style="margin-left: 100px;"><a href="./index.html" style="color: red;">首页</a> | 当前页面 ></span>
            <i class="cate">列表页</i>
            <a class="goodsfilter active" filter="hot">热销</a>
            <a class="goodsfilter " filter="sale">折扣</a>
            <select name="zk" id="" style="margin-left: 20px;">
                <option value="10">折扣类型</option>
                <option value="9">九折</option>
                <option value="8">八折</option>
                <option value="7">七折</option>
                <option value="6">六折</option>
                <option value="5">五折</option>
            </select>
            <a class="sortType pricedown" type="price">价格<b></b></a>
            <a class="sortType saledown" type="sale">销量<b></b></a>
        </div>
        <ul class="tul">

        </ul>
        <div class="page">
            <ol>

            </ol>
        </div>

    </div>
    <div class="zss">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script src="js/utils.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    var username = getCookie('username')
    if (username) {
        var loginLi = document.querySelector('.login')
        var mtbott = document.querySelector('.mright .mttop .mtbott')
        loginLi.innerHTML = `
       <li><a href ="./my.html">欢迎用户${username}</a></li>
       `
        var logup = document.querySelector('.logup')
        logup.innerHTML = `
       <a href = "javascript:;" class="logout">登出</a>
       `

        //登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
        <li><a href="./login.html" class="login">登录</a></li>
       `
            mtbott.innerHTML = `
            <span style="margin-right: 10px;">登录</span>
                    <span>|</span>
                    <span style="margin-left: 10px;">注册</span>
       `
            //删除cookie
            removeCookie('username')
        }
    }

    var tul = document.querySelector('.tul')

    // 定义请求的数据
    var current = 1
    var pagesize = 5
    var filter = 'hot'
    var saleType = 10
    var sortType = 'id'
    var sortMethod = 'ASC'
    var search = ''
    var category = ''

    // 获取商品分类 - 从首页跳转过来的时候，携带了一个参数
    // console.log( location.search );
    // 用正则提取
    // ?catgory=内衣配饰
    // ?id=6&category=XXX
    // ?id=6&category=XXX&cat=9
    // [\u4e00-\u9fa5]  - 用来在正则中匹配一个中文汉字
    // 非&的任意字符 - [^&] - 中括号中加^表示非
    // 要在正则表达式中获取到其中一部分，就将这一部分使用()括起来
    var reg = /category=([^&]+)/
    var arr = decodeURI(location.search).match(reg)
    // console.log(arr);
    // 判断
    if (arr && arr[1]) {
        // 将分类显示在路径导航中
        $('.cent .centtop .cate').text(arr[1])
        category = arr[1]
    }

    var reg = /keywords=([^&]+)/
    var arr = decodeURI(location.search).match(reg)
    if (arr && arr[1]) {
        $('.cent .centtop .cate').text(arr[1])
        search = arr[1]
        getData()
    }

    // 发送请求
    getData()

    function getData() {
        // 添加加载层
        // var loadId = layer.load(1, {
        //     shade: [1, '#000']
        // })
        $.get('http://localhost:8888/goods/list', {
            current,
            pagesize,
            filter,
            saleType,
            sortMethod,
            search,
            category
        }).then(res => {
            console.log(res);
            if (res.code === 1) {
                // 动态渲染数据
                var html = ''
                res.list.forEach(item => {
                    html += `
                    <li>
                        <a href="detail.html?id=${item.goods_id}&category=${category}">
                        <img src="${item.img_big_logo}" width="150" height="180" >
                        <p class="goodsprice">￥${item.price}</p>
                        <p class="goodsintroduce">${item.title}</p>
                        </a>
                    </li>
                `
                })
                $('.cent ul').html(html)
                // 动态渲染页码
                var totalPage = Math.ceil(res.total / pagesize)
                var pageHTML = `
                <li onclick="firstPage()">首页</li>
                <li onclick="prevPage()">上一页</li>
            `
                // 判断总页数 - 一直显示5个页码
                // 总页数大于5
                if (totalPage > 5) {
                    // 当前页<=3
                    if (current <= 3) {
                        // 1~5
                        for (let i = 1; i <= 5; i++) {
                            pageHTML +=
                                `<li onclick="toPage(${i})" ${i === current ? 'class="active"' : ''}>${i}</li>`
                        }
                    }
                    // 当前页>=总页数-2
                    else if (current >= totalPage - 2) {
                        for (var i = totalPage - 4; i <= totalPage; i++) {
                            pageHTML +=
                                `<li onclick="toPage(${i})" ${i === current ? 'class="active"' : ''}>${i}</li>`
                        }
                    }
                    // 当前页在中间
                    else {
                        for (var i = current - 2; i <= current + 2; i++) {
                            pageHTML +=
                                `<li onclick="toPage(${i})" ${i === current ? 'class="active"' : ''}>${i}</li>`
                        }
                    }
                }
                // 总页数不大于5
                else {
                    // 1~总页数
                    for (var i = 1; i <= totalPage; i++) {
                        pageHTML +=
                            `<li onclick="toPage(${i})" ${i === current ? 'class="active"' : ''}>${i}</li>`
                    }
                }

                pageHTML += `
                <li onclick="nextPage(${totalPage})">下一页</li>
                <li onclick="lastPage(${totalPage})">末页</li>
                <li class="count">共${totalPage}页</li>
                <li class="dao">到</li>
                <li class="pagenum"><input type="text" name="pagenum"></li>
                <li class="ye">页</li>
                <li class="gobtn" onclick="go(this, ${totalPage})"><button>确定</button></li>
            `
                // 判断list数据是否为空
                if (!res.list.length) {
                    $('.tul').text('当前条件下暂无商品，请切换条件！')
                    $('.page ol').html('')
                    return
                }
                $('.page ol').html(pageHTML)
                // 取消加载层
                // layer.close(loadId)
            }
        })
    }

    // 定义分页的点击事件
    function toPage(i) {
        if (current === i) {
            return
        }
        current = i
        getData()
    }

    function nextPage(totalPage) {
        current++
        if (current > totalPage) {
            current = totalPage
        }
        getData()
    }

    function firstPage() {
        current = 1
        getData()
    }

    function lastPage(totalPage) {
        current = totalPage
        getData()
    }

    function prevPage() {
        current--
        if (current < 1) {
            current = 1
        }
        getData()
    }

    function go(ele, totalPage) {
        // console.log(ele);
        var page = $(ele).prev().prev().find('input').val()
        if (page && !isNaN(page)) {
            current = page - 0
        }
        if (current > totalPage) {
            current = totalPage
        }
        if (current < 1) {
            current = 1
        }
        getData()
    }

    // 点击筛选商品事件
    $('.goodsfilter').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        filter = $(this).attr('filter')
        getData()
    })

    // 选择折扣类型
    $('[name="zk"]').change(function () {
        saleType = this.value - 0
        getData()
    })

    // 点击价格和销量
    $('.sortType').click(function () {
        sortType = $(this).attr('type')
        if (sortType === 'price') {
            $(this).toggleClass('pricedown').toggleClass('priceup')
            if ($(this).hasClass('priceup')) {
                sortMethod = 'ASC'
            } else if ($(this).hasClass('pricedown')) {
                sortMethod = 'DESC'
            }
        } else if (sortType === 'sale') {
            $(this).toggleClass('saledown').toggleClass('saleup')
            if ($(this).hasClass('saleup')) {
                sortMethod = 'ASC'
            } else if ($(this).hasClass('saledown')) {
                sortMethod = 'DESC'
            }
        }
        getData()
    })

    // 点击搜索按钮
    $('.so').click(function () {
        $.get('http://localhost:8888/goods/category', ).then(res => {
            // console.log(res);
            if (res.code === 1) {
                // 获取关键字
                var keywords = $(this).prev().val().trim()
                if (keywords === '') {
                    return false
                }
                location.href = 'list.html?keywords=' + keywords
            }
        })
        // 发送请求
        // getData()
    })
</script>

</html>